<template>
	<view class="content">
        <view v-for="(val, key) in map" :key="key">
			<video class="rich-video" v-if="val.type == 'video'" :src="val.value"></video>
            <rich-text v-else :nodes="val.value"></rich-text>
        </view>
	</view>
</template>

<script>
export default {
    props: {
        nodes: { type: String, default: '' }
    },
	data() {
		return {
			map: []
		}
	},
    watch: {
        nodes(val) {
            this.SplitStr(val)
        }
    },
	methods: {
		SplitStr(val = '') {
			const reg = /<div data-w-e-type="video" [^>]+>\s*<[^>]+>\s*<source src="([^"]+)"[^>]+>\s*<[^>]+>\s*<\/div>/gi
    		this.map.length = 0
			val.split(reg).forEach((v, i) => {
				this.map.push({
					type: v[0] == 'h'? 'video' : 'text',
					value: v[0] == 'h'? v: this.TransRich(v)
				})
			})
		},
		TransRich(val = '') {
			val = val.replace(/<img[^>]*>/gi, ($1)=> {
				let res = ''
				$1.replace(/src="[^"]+"/gi, ($2) => res = $2)
				return `<img ${res} style="width: 100%; height: auto;" />`
			})
			return `<p style="width: 100%; word-break: break-all; word-wrap: normal; text-indent: 0;">${val}</p>`
		},
	}
}
</script>

<style>
.content {
	position: relative;
}
.rich-video {
	width: 100%;
}
</style>
